<template>
  <div>
    <div class="bgColor">
      <div></div>
      <div></div>
    </div>
    <div class="header">
    
      <div class="navs">
        <div class="navItem" 
          v-for='(item,index) in list' 
          :key="index" 
          @click="toLink(item.router,index)"
          :class="{'active':currentIndex==index}"
        >
        {{item.name}}
        <div class=""> 

        </div>
        </div>
      </div>
      <div class="rightTime" @click="getCenter">
        <span>
          {{year}}
        </span>
        <span>{{time}}</span>
        <span>{{week}}</span>
      </div>
    </div>
  </div>
  
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  ref,
  watchEffect,
  watch
} from 'vue'
import { useRouter, useRoute } from 'vue-router'
import LayerManager from '../../cesiumPlugin/layerManager';

export default {
    setup(){
      const { ctx } = getCurrentInstance();
      let currentIndex = ref(0);
      // 获取路由器实例
      const router = useRouter()
      // route是响应式对象,可监控器变化
      const route = useRoute()
      watch(
          () => route.name,
          (name) => {
            switch(name) {
                case "hngk":
                    currentIndex.value = 0
                    break;
                case "sjhj":
                    currentIndex.value = 1
                    break;
                case "jcyj":
                    currentIndex.value = 2
                    break;
                case "zhjy":
                    currentIndex.value = 3
                    break;
                case "hfcj":
                    currentIndex.value = 4
                    break;
            } 
          }
      );
      
      
      const list = [
        {name: '海南概况',router :'hngk'},
        {name: '数据汇聚',router :'sjhj'},
        {name: '监测预警',router :'jcyj'},
        {name: '智慧救援',router :'zhjy'},
        {name: '恢复重建',router :'hfcj'}
      ];
      function toLink(ly,index){
        console.log(ly)
        router.push({name:ly})
        currentIndex.value = index
      }
      function timeToString(nowTime) {
        if (nowTime < 10) {
          return '0' + nowTime
        } else {
          return '' + nowTime
        }
      }
      let time = ref(null);
      let year = ref(null);
      let week = ref(null);
      function getTime(){
        setInterval(() => {
          const date = new Date()
          const hour = date.getHours()
          const minute = date.getMinutes()
          const second = date.getSeconds()
          const month = date.getMonth() + 1
          const today = date.getDate()
          time.value = timeToString(hour) + ':' + timeToString(minute) + ':' + timeToString(second)
          year.value = date.getFullYear() + '年' + timeToString(month) + '月' + timeToString(today) + "日"
          //const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
          const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
          week.value = weekday[date.getDay()]
        }, 1000)
        
      }
      function getCenter(){
        console.log(layerManager.getCenter())
      }
      onMounted(()=>{
        getTime()
      })
      
      return {
        list,
        router,
        toLink,
        time,
        year,
        week,
        getTime,
        getCenter,
        currentIndex
      }
    }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/varibles.styl'
  .bgColor
    width:100%
    height:vh(85)
    position:absolute
    z-index:3
    top:0
    left:0
    display:flex
    div:nth-child(1)
      flex:1
      //background:linear-gradient(to bottom right, rgba(0,0,0,.7) 10%, rgba(0,0,0,0));
      background:#000
    div:nth-child(2)
      flex:1
      background:#000
      //background:linear-gradient(to bottom left, rgba(0,0,0,.7) 10%, rgba(0,0,0,0));
  .header
    width:100%
    height:vh(85)
    position:absolute
    z-index:3
    top:0
    left:0
    color:#fff
    cursor: pointer
    display: flex
    justify-content :space-between
    //background:url('/data/images/header/top.png') right top no-repeat, linear-gradient(to bottom right, rgba(0,0,0,.7) 60%, rgba(0,0,0,0));
    background:url('/data/images/header/top.png') right top no-repeat
    background-size: 100%
    .navs
      display:flex
      margin-left:vw(24)
      margin-top:vh(48)
      font-size:vw(15)
      .navItem
        margin-right:vw(15)
        width: vw(89)
        height: vh(37)
        line-height: vh(37)
        letter-spacing : vw(2)
        text-align: center
        background:url("/data/images/header/active.png")  no-repeat
        background-size :100% 100%
      .active
        background:url("/data/images/header/bg.png")  no-repeat
        background-size :100% 100%
    .rightTime
      margin-top:vh(36)
      margin-right: vw(36)
      font-size:vw(20)
      span 
        color: #00E5FD
        margin-left:vw(15)

</style>